<template>
    <div class="viewTheDetails text">
        <div class="big">
            <!--头部—优惠券明细-->
            <div class="top">
                <div class="Leftgreen"></div>
                <div class="other">
                    &nbsp;优惠券明细
                    <div class="Topbutton">
                        <el-button class="el-button" @click="refresh">
                            <i class="el-icon-refresh"></i>
                            刷新
                        </el-button>
                        <el-button class="el-button" @click="back">
                            <i class="el-icon-arrow-left"></i>
                            返回
                        </el-button>
                    </div>
                </div>
            </div>
            <!--单条优惠券明细-->
           <div class="tableDetailsList">
               <el-table class="el-table"
                         :header-cell-style="{background:'#f6f7f9'}"
                         border><!--:data="tableDetailsList"-->
                   <el-table-column prop="userId" align="center" label="用户ID"></el-table-column>
                   <el-table-column prop="userId" align="center" label="用户账号"></el-table-column>
                   <el-table-column prop="userId" align="center" label="用户昵称"></el-table-column>
                   <el-table-column prop="userId" align="center" label="已使用"></el-table-column>
                   <el-table-column prop="userId" align="center" label="未使用"></el-table-column>
                   <el-table-column prop="userId" align="center" label="已过期"></el-table-column>
               </el-table>
            </div>
            <!--筛选查询—头-->
            <div class="search">
                &nbsp;&nbsp;
                <i class="el-icon-search"></i>
                <span class="text2 line">&nbsp;筛选查询</span>
                <el-button class="el-button searchbutton" @click="AdvancedSearch">高级检索</el-button>
                <!--展开收起-->
                <div class="UD" >
                    <a href="#" class="aUD" @click="changeadvanced" >
                        {{ advanced ? "收起筛选" : "展开筛选" }}
                        <i :class="advanced ? 'el-icon-caret-bottom' : 'el-icon-caret-top'" />
                    </a>
                </div>
            </div>
            <!--筛选查询—查询框-->
            <transition name="el-zoom-in-top">
                <div class="searchInterior text2" style="display: flex;" v-show="advanced">
                    <el-form ref="form" label-width="90px" @keyup.enter.native="sift">
                        <el-form-item label="优惠券名称:" class="item" >
                            <el-input v-model="form.couponsName" placeholder="请输入优惠券名称" @click.native="prompt"></el-input>
                        </el-form-item>
                        <el-form-item label="使用状态:" class="item" >
                            <el-input v-model="form.useState" placeholder="请输入使用状态" @click.native="prompt"></el-input>
                        </el-form-item>
                        <el-form-item label="领取方式:" class="item" >
                            <el-select v-model="form.getWay" placeholder="全部" @click.native="prompt">
                                <el-option label="签到获得" value="2"></el-option>
                                <el-option label="活动领取" value="3"></el-option>
                                <el-option label="人工发放" value="4"></el-option>
                                <el-option label="无限制" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </transition>
            <!--高级检索弹出框-->
            <div>
                <el-dialog title="高级检索" :visible.sync="dialogAFormVisible" class="title" >
                    <el-form>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="优惠券名称:" :label-width="formLabelWidth">
                                    <el-input v-model="form.couponsName2" class="ckInput" placeholder="请输入优惠券名称" autocomplete="off" style=" width: 194px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="领取方式:" :label-width="formLabelWidth">
                                    <el-select v-model="form.getWay2" placeholder="全部">
                                        <el-option label="签到领取" value="2"></el-option>
                                        <el-option label="活动领取" value="3"></el-option>
                                        <el-option label="人工发放" value="4"></el-option>
                                        <el-option label="无限制" value="5"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item  label="领取时间:" :label-width="formLabelWidth">
                                    <template>
                                        <div class="block" >
                                            <el-date-picker style=" width: 194px;"
                                                            value-format="yyyy-MM-dd"
                                                            v-model="form.getDate2"
                                                            type="date"
                                                            placeholder="选择开始日期">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="使用时间:" :label-width="formLabelWidth">
                                    <template>
                                        <div class="block">
                                            <el-date-picker style=" width: 194px;"
                                                            value-format="yyyy-MM-dd"
                                                            v-model="form.useDate2"
                                                            type="date"
                                                            placeholder="选择结束日期">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="面额:" :label-width="formLabelWidth">
                                    <el-input v-model="form.money" class="ckInput" placeholder="请输入优惠券名称" autocomplete="off" style=" width: 194px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-divider></el-divider>
                    <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
                        <el-button @click="reset()">重 置</el-button>
                        <el-button @click="retrieval" class="actionSearch">开始检索</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--数据列表—头-->
            <div class="data">
                &nbsp;&nbsp;
                <i class="el-icon-document"></i>
                <span class="text2 line">&nbsp;数据列表</span>
                <el-button disabled class="databutton">排序方式<i class="el-icon-caret-bottom"></i></el-button>
                <el-button disabled class="databutton">显示条数<i class="el-icon-caret-bottom"></i></el-button>
            </div>
            <!--数据列表—表格-->
            <div class="tableList">
                <el-table class="el-table"
                          :header-cell-style="{background:'#f6f7f9'}"
                          :data="tableList">
                    <el-table-column prop="couponCode" align="center" label="优惠码" sortable></el-table-column>
                    <el-table-column prop="couponName" align="center" label="优惠券名称" sortable></el-table-column>
                    <el-table-column prop="couponPrice" align="center" label="面额" sortable></el-table-column>
                    <el-table-column prop="couponsGrant" align="center" label="领取方式" sortable></el-table-column>
                    <el-table-column prop="getDate" align="center" label="领取时间" sortable>
                        <template slot-scope="scope">
                            <el-switch class="switch"
                                       v-model="scope.row.couponsOnline"
                                       active-color="#EFEFEF"
                                       inactive-color="#1ABC9C"
                                       :active-value="3"
                                       :inactive-value="2"
                                       :plain="true"
                                       @change="changeSwitch(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="currentStatus" align="center" label="当前状态" sortable>
                        <template slot-scope="props">
                            <el-row>
                                <el-col>
                                    <span v-if="props.row.couponsGrant == '2'">自动发放</span>
                                    <span v-if="props.row.couponsGrant == '3'">活动领取</span>
                                    <span v-if="props.row.couponsGrant == '4'">人工发放</span>
                                    <span v-if="props.row.couponsGrant == '5'">无限制</span>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="useDate" align="center" label="使用时间" sortable></el-table-column>
                    <el-table-column prop="orderLogisticsNumber" align="center" label="订单编号" sortable></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--尾部—分页部分-->
            <div class="pagination">
                <div class="paginationLeft">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button class="FYqd">确定</el-button>
                </div>
                <div style="margin-top:.2rem;margin-left: .2rem;">
                    <el-pagination background
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[8,6,4,2]"
                                   :page-size="pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableList.length" style="padding: 8px 0px 0px 375px;">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "viewTheDetails",
        data(){
            return{
                //开启高级检索弹框
                dialogAFormVisible:false,
                form:{
                  //筛选查询数据
                    couponsName:'',
                    useState:'',
                    getWay:'',
                  //高级检索数据
                    couponsName2:'',
                    getWay2:'',
                    getDate2:'',
                    useDate2:'',
                    money:'',
                    //表数据
                    couponCode:'',
                    couponName:'',
                    couponPrice:'',
                    couponsGrant:'',
                    getDate:'',
                    currentStatus:'',
                    usedate:'',
                    orderLogisticsNumber:''
                },
                //定义明细单查数据集合
                tableDetailsList:[],
                //定义表数据集合
                tableList:[],
                //查询框展开收起
                advanced: false,
                //分页
                currentPage: 1,
                currentIndex: '',
                pagesize: 8,
                //Form表单lable宽
                formLabelWidth: '100px'
            }
        },
        methods:{
            //刷新按钮方法
            refresh(){
                window.location.reload();
            },
            //返回按钮方法
            back(){
                this.$router.back()
            },
            //查看明细
            async couponsUsed(){
                //取出数据
             /*   console.log(this.$store.state.couponsUsed.userId)
                const {data:res} = await this.$http.post("/couponsUsed/getCouponsUsedByUserId",{
                    "userId":8447466
                })*/
             /*this.$http.post('/couponsUsed/getCouponsUsedByUserId').then(()=>{
                 this.$store.state.couponsUsed.userId
             })*/
            },
            //查询框开收方法
            changeadvanced() {
                this.advanced = !this.advanced;
            },
            //提示筛选搜索方式
            prompt() {
                this.$message('按Enter键进行搜索');
            },
            //高级检索弹出框
            AdvancedSearch(){
                this.dialogAFormVisible = true;
            },
            //重置按钮方法
            reset(){
                this.form.couponsName2 = '';
                this.form.getWay2 = '';
                this.form.getDate = '';
                this.form.endDate2 = '';
                this.form.useDate = '';
                this.form.money = '';
            },
            //高级检索方法
            async retrieval(){
                /*console.log(this.form.region2)
                const {data:res} = await this.$http.post("/coupons/getCouponslistFuzzyCheck",{
                    "couponName":this.form.name2,
                    "couponsGrant":this.form.region2,
                    "startDate":this.form.startDate2,
                    "endDate":this.form.endDate2,
                    "couponsOnline":this.form.state2,
                })
                this.tableList = res;
                this.dialogAFormVisible = false;
                console.log(this.form.startDate2);
                console.log(this.form.endDate2);*/
            },
            //筛选查询方法
            async sift(){
                console.log(this.form.region)
                const {data:res} = await this.$http.post("/coupons/getCouponslistFuzzyCheck",{
                    "couponsName":this.form.name,
                    "useState":this.form.region,
                    "getWay":this.form.state,
                })
                this.tableList = res;
            },
            //分页
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage= val
            },
            //联查三表信息

        },
        created() {
            this.couponsUsed();
        }
    }
</script>

<style scoped>
    .viewTheDetails{
        width: 100%;
        height: 100%;
    }
    .big{
        background-color: #F6F7F9;
        height: 100%;
        width: 100%;
    }
    .top{
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        height: 40px;
        line-height: 40px;
    }
    .Leftgreen{
        background-color: #1ABC9C;
        width: 4px;
        height: 19px;
        float: left;
        margin-top: 11px;
    }
    .text{
        color: #978f96;
        font-family: Arial;
    }
    .text2{
        color: #5C6573;
    }
    .Topbutton{
        float: right;
        margin-right: 40px;
        margin-top: 1.5px;
    }
    .el-button{
        margin-right: 15px;
        height: 30px;
        Padding-top:8px
    }
    .tableDetailsList{
        margin-top: 20px;
        border: #e4e4e4 1px solid;
        width: 1095px;
    }
    .search{
        margin-top: 20px;
        width: 1093px;
        height: 40px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .searchInterior{
        background-color: white;
        height: 60px;
        width: 1092px;
        border: 1px #d5d5d5 solid;
        margin-top: -41px;
        margin-bottom: 10px;
    }
    .searchbutton{
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
    .item{
        width:300px;
        float: left;
        margin: 10px 10px 0px 10px;
    }
    .UD{
        position: relative;
        top: -38px;
        left: 880px;
        width: 75px;
    }
    .aUD{
        color: #978f96;
        text-decoration: none;
    }
    .aUD:hover{
        color: #509f92;
    }
    .actionSearch{
        background-color: #409EFF;
        color: #fff;
    }
    .actionSearch:hover{
        background-color: #2e73b9;
        color: white;
    }
    .tableList{
        margin-top: 20px;
        border: #e4e4e4 1px solid;
        width: 1095px;
    }
    .data{
        margin-top: 20px;
        width: 1093px;
        height: 40px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .databutton{
        float: right;
        margin-right: 15px;
        margin-top: 5px;
    }
    .tableUsedList{
        border: 1px #d5d5d5 solid;
        width: 1095px;
    }
    .pagination{
        height: 49px;
        width: 1094px;
        background-color: #FFF;
        border: 1px #d5d5d5 solid;
    }
    .paginationLeft{
        float: left;
        padding: 10px 0px 0px 40px;
    }
    .FYqd{
        position: relative;
        left: 805px;
    }
    .detailsA{
        text-decoration: none;
        color: #409EFF;
    }
    .detailsA:hover{
        color: #66B9FD;
        text-decoration: none;
    }
</style>